<template>
  <t-card title="配置详情信息" class="info-block" :bordered="false">
    <t-descriptions 
      colon
      bordered
      size="large">
      <t-descriptions-item v-for="(item, index) in detailData" :key="index" :label="item.name">
        {{ item.value }}
      </t-descriptions-item>
      <t-descriptions-item label="Name">自媒体爬虫</t-descriptions-item> 
      <!-- 示例数据 todo: 奇怪的bug,为什么要加一行假数据才可以渲染?? -->
    </t-descriptions>
  </t-card>
</template>

<script lang="ts">
export default {
  name: 'Detail',
  data() {
    return {
      detailData: [] as Array<{ name: string; value: any }>,
      visible: false,
    };
  },
  mounted() {
    this.fetchDetailData();
  },
  methods: {
    async fetchDetailData() {
      const taskId = this.$route.query.taskId as string;
      if (taskId) {
        try {
          const response = await this.$request.get(`/system/crawler-configs/retrieve-details/`, {
            params: { task_id: taskId },
          });
          if (response.status === 200) {
            const item = response.data;
            // 将对象转换为数组，每个键值对转换为 { name, value }
            const transformedData = Object.keys(item).map((key) => ({
              name: this.getDisplayName(key),
              value: item[key],
            }));
            this.detailData = transformedData;
          } else {
            this.$message.error('获取详情数据失败');
          }
        } catch (error) {
          console.error('获取详情数据失败:', error);
          this.$message.error('获取详情数据失败');
        }
      }
    },
    /**
     * 根据键名返回对应的显示名称
     * @param key 键名
     * @returns 显示名称
     */
    getDisplayName(key: string): string {
      const mapping: Record<string, string> = {
        task_id: '任务ID',
        platform_name: '平台名称',
        crawler_type: '搜索类型',
        keyword: '关键词',
        id_list: '笔记列表',
        creator_list: '创作者列表',
        remark: '备注',
        is_crawler_comment: '获取一级评论',
        is_crawler_sub_comment: '获取二级评论',
        create_time: '创建时间',
        statuses: '状态列表',
        crawler_status: '状态信息',
        start_time: '开始时间',
        end_time: '结束时间',
        crawler_status_logs: '状态日志',
      };

      return mapping[key] || key;
    },
  },
};
</script>

<style lang="less" scoped>
.info-block {
  margin-bottom: 20px;
}
</style>
